<script setup>
import { ref } from 'vue'

// 导航菜单
const navItems = ref([
  { 
    name: '语音助手', 
    path: '/',
    icon: '🎙️'
  },
  { 
    name: '设备管理', 
    path: '/devices',
    icon: '🔌'
  },
  { 
    name: '智能场景', 
    path: '/scenes',
    icon: '🎭'
  },
  { 
    name: '音乐空间', 
    path: '/room',
    icon: '🎵'
  },
  { 
    name: '社交广场', 
    path: '/social',
    icon: '👥'
  },
  { 
    name: '使用统计', 
    path: '/statistics',
    icon: '📊'
  }
])

// 工具菜单
const toolItems = ref([
  {
    name: '语音训练',
    path: '/training',
    icon: '🎯'
  },
  {
    name: '音质测试',
    path: '/test',
    icon: '🎧'
  },
  {
    name: '系统设置',
    path: '/settings',
    icon: '⚙️'
  },
  {
    name: '问题反馈',
    path: '/tickets',
    icon: '💬'
  }
])

// 设备状态
const deviceStatus = ref({
  wifi: true,
  bluetooth: true,
  microphone: true
})
</script>

<template>
  <nav class="nav-menu">
    <!-- 设备状态 -->
    <div class="device-status">
      <span 
        class="status-icon"
        :class="{ active: deviceStatus.wifi }"
        title="WiFi"
      >
        📶
      </span>
      <span 
        class="status-icon"
        :class="{ active: deviceStatus.bluetooth }"
        title="蓝牙"
      >
        📱
      </span>
      <span 
        class="status-icon"
        :class="{ active: deviceStatus.microphone }"
        title="麦克风"
      >
        🎤
      </span>
    </div>

    <!-- 主导航菜单 -->
    <div class="nav-section">
      <div class="section-title">主功能</div>
      <div class="nav-items">
        <router-link
          v-for="item in navItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
        >
          <span class="item-icon">{{ item.icon }}</span>
          <span class="item-name">{{ item.name }}</span>
        </router-link>
      </div>
    </div>

    <!-- 工具菜单 -->
    <div class="nav-section">
      <div class="section-title">工具</div>
      <div class="nav-items">
        <router-link
          v-for="item in toolItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
        >
          <span class="item-icon">{{ item.icon }}</span>
          <span class="item-name">{{ item.name }}</span>
        </router-link>
      </div>
    </div>
  </nav>
</template>

<style scoped>
.nav-menu {
  height: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 设备状态样式 */
.device-status {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.status-icon {
  opacity: 0.3;
  transition: all 0.3s ease;
}

.status-icon.active {
  opacity: 1;
}

/* 导航菜单样式 */
.nav-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  color: var(--text-gray);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 1rem;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  color: var(--text-gray);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.item-icon {
  font-size: 1.2rem;
  min-width: 24px;
  text-align: center;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
}

.router-link-active {
  background-color: var(--primary-color);
  color: var(--text-light);
}

@media (max-width: 768px) {
  .nav-menu {
    padding: 1rem 0.5rem;
  }

  .device-status {
    padding-bottom: 1rem;
  }

  .section-title,
  .item-name {
    display: none;
  }

  .nav-item {
    padding: 0.8rem;
    justify-content: center;
  }

  .item-icon {
    font-size: 1.5rem;
  }
}
</style>